<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script>
    const bucket = new Set() //这里没有使用数组是因为set看他自动去重
    function isObject (obj) {
      return typeof obj === 'object' && obj !== null
    }
    function reactive (data) {
      if (!isObject(data)) return
      return new Proxy(data, {
        get (target, key) {
          return target[key]
        },
        set (target, key, value) {
          target[key] = value
          bucket.forEach(fn => fn())
          return true
        },
      })
    }
    const obj = reactive({ name: '小胖', age: 30 })

    function effect () {
      console.log('副作用函数1')
      app.innerHTML = obj.name
    }
    bucket.add(effect)
    function effect2 () {
      console.log('副作用函数2')

      obj.name
    }
    bucket.add(effect2)

    setTimeout(() => {
      obj.name = '小小胖'
    }, 2000)
  </script>
</body>

</html>